<template>
    <div class="list">
    <el-row class="head">
        <el-col >——维修人员列表/维修人员</el-col>
    </el-row>
        <el-row class="title">
            <el-col>维修人员列表</el-col>
        </el-row>
        <el-form ref="form" label-position="left" :model="form" label-width="100px" >

            <el-form-item label="账号权限">
                <el-radio-group v-model="form.roleId">
                    <el-radio label="全部" value="10"></el-radio>
                    <el-radio label="维修人员" value="1"></el-radio>
                    <el-radio label="分类管理员" value="5"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="维修分类">
                <el-select v-model="form.typeId" placeholder="全部" >
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门">
                <el-input v-model="form.company"></el-input>
            </el-form-item>



            <el-form-item>
                <el-button type="primary" @click="onSubmit(form)">查询</el-button>
            </el-form-item>
        </el-form>


        <el-table
                :data="admins"
                border
                style="width: 100%">
            <el-table-column
                    label="维修分类"
                    width="200">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.typeId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="账号权限"
                    width="200">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.role }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="登陆账号"
                    width="200">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.username }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="姓名"
                    width="200">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="手机"
                    width="200">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.mobile }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="部门"
                    width="200">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.company }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.role<8"
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "list",
        data(){
            return{
                form:{

                        typeId:'',
                        roleId :'全部',
                        role:'',
                        company:'',
                },
                admins: [],
                options:[],
            }
        },
        created(){
            this.getTypes();
        },
        methods:{
            onSubmit(form){
               if (form.roleId==="全部")
               {
                   form.role='';
               }
                if (form.roleId==="维修人员")
                {
                    form.role='1';
                }
                if (form.roleId==="分类管理员")
                {
                    form.role='5';
                }
                console.log(form);
                this.$axios.post("/api/v1/user/super/selbyadmin",form)
                    .then(result =>{
                        return result.data;
                    })
                    .then(data =>{
                        this.admins=data.data;
                        console.log(this.admins);
                    })

            },
            //获取type列表
            getTypes()
            {
                this.$axios.post("/api/v1/user/type/list").then(result => {

                    return result.data;
                })
                    .then(data1 => {
                        this.options=data1.data;
                    });
            },
            handleEdit(index, row) {
                var id=row.id;
               this.$router.push({
                   path:`/user/upd/${id}`
               })
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        }

    }
</script>

<style scoped>
    .el-input{
        width: 600px;
    }
</style>